<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>0701_props基本使用</title>
</head>

<body>
  <div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">

    // 1.创建组件
    class Person extends React.Component {
      render() {
        console.log(this);
        const {name, age, sex} = this.props
        return (
          <ul>
            <li>姓名：{name}</li>
            <li>性别：{sex}</li>
            <li>年龄：{age}</li>
            </ul>
        )
      }

    }
    const p = {name: 'tom', sex: '女', age: 33}
    // react中虽然语法不报错，但是没任何输出
    // console.log('...//', ...p);
    // 2.渲染虚拟DOM到页面
    // 在标签中{...p}
    ReactDOM.render(<Person {...p}/>, document.getElementById('test1'))
    ReactDOM.render(<Person name="张三" sex="女" age="30"/>, document.getElementById('test2'))
    ReactDOM.render(<Person name="李四" sex="男" age="25"/>, document.getElementById('test3'))
  </script>
</body>

</html>